<template>
  <div class="cloudParking">
    <header>
      <el-form :model="searchData" class="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchData.parkName" clearable class="seech1" placeholder="停车场名称" @change="getTableData(1)"/>
        </el-form-item>

        <el-form-item>
          <el-input v-model.trim="searchData.bolianParkId" class="seech1" clearable placeholder="泊链parkId" @change="getTableData(1)" />
        </el-form-item>

        <el-form-item class="seech0">
          <el-select v-model="searchData.isShow" class="seech2" placeholder="线上展示状态" @change="getTableData(1)" clearable>
            <el-option label="正常展示" value="1"/>
            <el-option label="关闭展示" value="0"/>
          </el-select>
        </el-form-item>

        <el-form-item style="width: 80px;">
          <el-button type="primary" icon="el-icon-search" @click="getTableData(1)">搜索</el-button>
        </el-form-item>
        <div style="float: right;margin-right: 20px;">
          <el-button type="warning" @click="messageShow = true">短信配置</el-button>
          <el-button>在线车场：{{parkCount}}</el-button>
          <el-button type="success" @click="addShow = true" icon="el-icon-circle-plus-outline">新增车场</el-button>
        </div>
      </el-form>

    </header>

    <section>
      <el-table :data="tableData" height="100%" border v-loading="tableLoading">
        <el-table-column prop="parkName" label="停车场名称" align="center" width="160"/>
        <el-table-column prop="parkAddress" label="停车场地址" align="center" min-width="280"/>
        <!-- <el-table-column prop="bolianComId" label="泊链编号" align="center" width="120"/> -->
        <!-- <el-table-column prop="bolianParkUnionId" label="泊链ParkUnionId" align="center" width="100" /> -->
        <!-- <el-table-column prop="id" label="停车场ID" align="center" width="140"/> -->
        <el-table-column prop="bolianParkId" label="泊链ParkId" align="center" width="140"/>

        <el-table-column prop="telephone" label="联系电话" align="center" width="110"/>
        <el-table-column label="单双系统" align="center" width="120">
          <template slot-scope="scope"> {{ scope.row.singleDoubleSystem | systemFilter }}</template>
        </el-table-column>
        <el-table-column prop="totalParkSpace" label="总车位" align="center" width="70"/>
        <el-table-column prop="reserveParkSpace" label="预约车位" align="center" width="80"/>
        <!-- <el-table-column prop="monthDivide" label="月租费分润" align="center" width="80"/> -->
        <!-- <el-table-column prop="orderDivide" label="停车费分润" align="center" width="80"/> -->
        <el-table-column prop="parkTicketDivide" label="停车券分润(%)" align="center" width="114"/>
        <el-table-column prop="priceDesc" label="收费规则" align="center" width="100">
          <template slot-scope="scope">
            <el-popover trigger="hover" width="200">
              <span slot="reference" class="seeRule">查看规则</span>
              <span v-html="scope.row.priceDesc"/>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="展示状态" prop="isShow" fixed="right" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isShow"
              active-color="#46a6ff"
              inactive-color="#ccc"
              @change="switchStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="280">
          <template slot-scope="scope">
            <el-button type="success" size="mini" :disabled="scope.row.parkTicketDivideStatus=='0'" @click="parkProfitShow = true,id = scope.row.id">{{scope.row.parkTicketDivideStatus | parkTicketDivideStatusFilter}}</el-button>
            <el-button type="warning" size="mini" @click="editShow = true,row = scope.row">编辑</el-button>
            <el-button type="primary" size="mini" @click="detailsShow = true,row = scope.row">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :hide-on-single-page="false"
        :current-page="searchData.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="10"
        background
        style="margin-top:10px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </footer>

    <el-dialog width="800px" :visible.sync="editShow" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <edit v-if="editShow" :row = "row" @closeDialog="editShow = false" @refresh="getTableData"/>
    </el-dialog>

    <el-dialog :visible.sync="detailsShow" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <detailsMember v-if="detailsShow" :row = "row" @closeDialog="detailsShow = false"/>
    </el-dialog>

    <el-dialog top="8px" :visible.sync="addShow" width="740px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <addParking v-if="addShow" @closeDialog="addShow = false" @refresh="getTableData"/>
    </el-dialog>

    <el-dialog top="8px" :visible.sync="parkProfitShow" width="1000px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <parkProfit v-if="parkProfitShow" :id = "id" @closeDialog="parkProfitShow = false" @refresh="getTableData"/>
    </el-dialog>

    <el-dialog top="8px" :visible.sync="messageShow" width="500px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <Message v-if="messageShow" @closeDialog="messageShow = false" @refresh="getTableData"/>
    </el-dialog>

  </div>
</template>

<script>
  import edit from './components/edit.vue'
  import addParking from './components/addParking.vue'
  import detailsMember from './components/detailsMember.vue'
  import parkProfit from './components/parkProfit.vue'
  import { formatDate } from '@/utils/formatDate.js'
  import Message from './components/messageConfigure.vue'

  export default {
    name: 'cloudParking',
    components: { edit, addParking, detailsMember, parkProfit, Message},
    data() {
      return {
        tableData: [],
        searchData: {
          currentPage: 1,
          pageSize: 10,
          isShow: '',
          parkSource: null
        },
        editShow: false,
        detailsShow: false,
        total: 0,
        parkCount: 0,
        tableLoading: true,
        addShow: false,
        parkProfitShow: false,
        searchLoading: false,
        messageShow: false,
        searchOptions: [],
      }
    },
    filters: {
      dateTimeFilter(date){
        if(date != null){
          return formatDate(new Date(date), 'yyyy-MM-dd hh:mm')
        }
      },
      systemFilter(system) {
        return system == 1 ? '单系统' : '双系统'
      },
      parkTicketDivideStatusFilter(status) {
        return status == "1" ? '停车券分润' : '未参与券分润'
      }
    },
    mounted() {
      this.getTableData();
    },
    methods: {
      getTableData(page) {
        if(page) {
          this.searchData.currentPage = page;
        }
        if(this.searchData.isShow == 'null') {
          this.searchData.isShow = ''
        }
        this.$axios({
          method: 'post',
          url: '/park/park-info/getParkPage',
          data: this.searchData
        }).then((res) => {
          res.data.ipage.records.forEach(item => {
            item.isShow = item.isShow == '1';
            item.parkTicketDivide = item.parkTicketDivide * 100;
          })
          this.tableData = res.data.ipage.records;
          this.total = res.data.ipage.total;
          this.tableLoading = false;
          this.parkCount = res.data.parkCount;
        })
      },

      switchStatus(e) {
        if(e.isShow) {
          this.switchParkShow(e);
        } else {
          this.$prompt('请输入关闭车场原因', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValue: e.closeExplain,
            inputValidator: function(e) {
              if(e) {
                return true
              } else {
                return false
              }
            },
            inputErrorMessage: '请输入关闭原因:'
          }).then(({ value }) => {
            this.switchParkShow(e,value)
          }).catch(() => {
            this.getTableData();
            this.$message({
              type: 'info',
              message: '取消关闭'
            });
          });
        }
      },

      switchParkShow(e,closeExplain) {
        const status = e.isShow == true ? '1' : '0';
        this.$axios({
          method: 'post',
          url: '/park/park-info/switchParkShow',
          data: this.$qs.stringify({ parkId: e.id, isShow: status, closeExplain: closeExplain })
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('规则状态修改成功！')
          } else {
            this.$message.warning('规则状态修改失败！')
          }
        })
      },
      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchData.pageSize = val;
        this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchData.currentPage = val;
        this.getTableData();
      },

      remoteMethod(query) {
        this.$axios({
          method: 'post',
          url: '/promotion/month-rule/getMonthName',
          data: {page: 1,size: 10, ruleName: query}
        }).then((res) => {
          this.searchOptions = res.data.records;
        })
        // if (query !== '') {
        //   this.searchLoading = true;
        //   setTimeout(() => {
        //     this.searchLoading = false;
        //     this.searchOptions = this.searchList.filter(item => {
        //       return item.label.toLowerCase()
        //         .indexOf(query.toLowerCase()) > -1;
        //     });
        //   }, 200);
        // } else {
        //   this.searchOptions = [];
        // }
      }
    }
  }
</script>

<style scoped>
  .cloudParking {
    height: 100%;
    position: relative;
  }
  header {
    height: 40px;
  }
  footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: -20px;
  }
  section {
    height: calc(100% - 70px);
  }
  .searchForm .el-form-item {
  	width: 220px;
  	display: inline-block;
  }
  .searchForm .seech0 {
    width: 160px;
  }
  .seech1 {
  	width:200px;
  }
  .seech2 {
    width: 140px;
  }




</style>
